<!DOCTYPE html>
<html lang="en">
<head>
    {% if title %}
        <title>{{ title }}</title>
    {% else %}
        <title>Flask Title</title>
    {% endif %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-line-numbers.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-autolinker.css') }}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-show-language.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-treeview.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-command-line.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-toolbar.css') }}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-show-invisibles.css') }}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-line-highlight.css') }}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-previewer-angle.css') }}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-previewer-base.css') }}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-previewer-color.css') }}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-previewer-easing.css') }}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-previewer-gradient.css') }}"> 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/prism-previewer-time.css') }}">
    <!-- custom -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/cssDictionary.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom_flex.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom_grid.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/shapes_layout.css') }}">
    
    <style>

    </style>
</head>
<body>
<div class="header-nav-body-footer">
    <header class="header">
        {% block header %}

        {% if title %}
            {{ title }}
        {% else %}
            Flask Title
        {% endif %}
        <!--
    <div clas="socketio">
        <h1>bbb</h1>

        <h3 style='color: #ccc;font-size: 30px;'>No message yet..</h3>
        <div class="message_holder"></div>

        <form action="" method="POST">
            <input type="text" class="username" placeholder="User Name" />
            <input type="text" class="message" placeholder="Messages" />
            <input type="submit" />
        </form>
    </div> -->

        {% endblock header %}
    </header>


    <nav class="table-of-contents nav">
        {% block nav %}

        Content

        {% endblock nav %}
    </nav>

    <main class="main">
        {% block content %}
            <a href="base" target="_blank"><h1>base</h1></a>
            <a href="CSS_properties_and_alues" target="_blank"><h1>CSS_properties_and_alues</h1></a>
            <a href="flex" target="_blank"><h1>flex</h1></a>
            <a href="grid" target="_blank"><h1>grid</h1></a>
            <a href="javascript" target="_blank"><h1>javascript</h1></a>
            <a href="shapes_layout" target="_blank"><h1>shapes_layout</h1></a>
        {% endblock content %}
    </main>

    <footer class="footer">
        {% block footer %}
            footer
        {% endblock footer %}
    </footer>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{ url_for('static', filename='js/jquery-v3.6.0.js') }}"></script>

<!-- socketIO -->
<script src="{{ url_for('static', filename='js/socket.io-v1.7.3.js') }}"></script>

<!-- js change element color or border attribute -->
<!-- <script src="{{ url_for('static', filename='js/jquery-migrate-v3.3.2.js') }}"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.0/jquery-migrate.js" integrity="sha512-7Xa2rSD+W7sXaxh5fF8vyM/9jlhm3bn7RqyxD9yIJZrE1G1BlNSRygOb5eN5uoJ6PJVa4DvIKg1yBPKfl+vu/w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--  "jquery-ui.v1.13.0.js"   draggable  -->
<!-- <script src="{{ url_for('static', filename='js/jquery-ui-v1.13.0.js') }}" ></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js" integrity="sha512-JGKswjfABjJjtSUnz+y8XUBjBlwM1UHNlm2ZJN7A2a9HUYT3Mskq+SacsI35k4lok+/zetSxhZjKS3r3tfAnQg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- grammar highlight -->
<script src="{{ url_for('static', filename='js/prism.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-line-numbers.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-autolinker.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-show-language.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-treeview.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-command-line.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-toolbar.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-copy-to-clipboard.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-download-button.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-match-braces.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-normalize-whitespace.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-show-invisibles.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-line-highlight.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-previewer-angle.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-previewer-base.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-previewer-color.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-previewer-easing.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-previewer-gradient.js') }}"></script>
<script src="{{ url_for('static', filename='js/prism-previewer-time.js') }}"></script>

<!-- custom -->
<script src="{{ url_for('static', filename='js/cssDictionary.js') }}"></script>
<script src="{{ url_for('static', filename='js/custom_socketio_event.js') }}"></script>
<script src="{{ url_for('static', filename='js/custom_flex.js') }}"></script>
<script src="{{ url_for('static', filename='js/custom_grid.js') }}"></script>
<script src="{{ url_for('static', filename='js/base.js') }}"></script>
<script src="{{ url_for('static', filename='js/shapes_layout.js') }}"></script>

</body>
</html>